<template>
    <div class="main">
        <div class="cards">
            <el-card shadow="hover" class="box-card">
                <div slot="header" class="card">
                    <i class="el-icon-cloudy"></i>
                    <div class="header">云存储</div>
                </div>
                <div class="pic-data">
                    <div class="card-body cloud"></div>
                    <div class="card-body card-body-items">
                        <div class="data">已用空间 <em>{{ data.storage_num }}</em> GB</div>
                        <div class="data">最大空间<em>{{ data.max_storage }}</em>GB</div>
                        <div class="data">文件数目<em>{{ data.file_num }}</em>个</div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="hover" class="box-card">
                <div slot="header" class="card">
                    <i class="el-icon-edit"></i>
                    <span class="header">作业概括</span>
                </div>
                <div class="pic-data">
                    <div class="card-body cloud"></div>
                    <div class="card-body  card-body-items">
                        <div class="data">总作业数 <em>{{ data.tot_task }}</em>个</div>
                        <div class="data">已完成<em>{{ data.done_task }}</em>个</div>
                        <div class="data">正在运行<em>{{ data.running_task }}</em>个</div>
                    </div>
                </div>
            </el-card>
            <el-card  shadow="hover" class="box-card">
                <div slot="header" class="card">
                    <i class="el-icon-s-platform"></i>
                    <span class="header">计算资源</span>
                </div>
                <div class="pic-data">
                    <div class="card-body cloud"></div>
                    <div class="card-body  card-body-items">
                        <div class="data">已用机时<em>{{ data.used_coreh }}</em>万核时</div>
                        <div class="data">剩余机时<em>{{ data.remain_coreh }}</em>万核时</div>
                        <div class="data">最大核数<em>{{ data.max_cores }}</em></div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="hover" class="box-card">
                <div slot="header" class="card">
                    <i class="el-icon-s-order"></i>
                    <span class="header">数据库</span>
                </div>
                <div class="pic-data">
                    <div class="card-body cloud"></div>
                    <div class="card-body  card-body-items">
                        <div class="data">查询次数<em>{{ data.search_num }}</em>次</div>
                        <div class="data">个人数据集<em>{{ data.dataset_num }}</em>个</div>
                        <div class="data">最大数据集<em>{{ data.max_dataset }}</em>个</div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="hover" class="box-card">
                <div slot="header" class="card">
                    <i class="el-icon-wallet"></i>
                    <span class="header">训练模型</span>
                </div>
                <div class="pic-data">
                    <div class="card-body cloud"></div>
                    <div class="card-body card-body-items">
                        <div class="data">训练次数<em>{{ data.train_num }}</em>次</div>
                        <div class="data">已获模型<em>{{ data.model_num }}</em>个</div>
                        <div class="data">个人配置<em>{{ data.config_num }}</em>个</div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="hover" class="box-card">
                <div slot="header" class="card">
                    <i class="el-icon-data-line"></i>
                    <span class="header">智能预测</span>
                </div>
                <div class="pic-data">
                    <div class="card-body cloud"></div>
                    <div class="card-body card-body-items">
                        <div class="data">预测次数<em>{{ data.predict_num }}</em>次</div>
                        <div class="data">保存记录<em>{{ data.predict_save_records }}</em>次</div>
                        <div class="data">工具使用<em>{{ data.tools_used }}</em>次</div>
                    </div>
                </div>
            </el-card>
        </div>
        <el-divider></el-divider>
        <div class="homework">
            <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" border>
                <el-table-column prop="ID" label="作业ID" width="220">
                </el-table-column>
                <el-table-column prop="name" label="任务名称" width="220">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="220">
                </el-table-column>
                <el-table-column prop="user_name" label="用户名" width="220">
                </el-table-column>
                <el-table-column prop="state" label="任务状态">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import Axios from 'axios';
import * as echarts from 'echarts';
import {checkLogin} from "@/utils/checkLogin"

export default {
    data() {
        return {
            data: {
                config_num: 0,
                dataset_num: 0,
                done_task: 0,
                file_num: 0,
                max_config: 0,
                max_cores: 0,
                max_data_num: 0,
                max_dataset: 0,
                max_file_num: 0,
                max_model: 0,
                max_nodes: 0,
                max_predict_records: 0,
                max_running_task: 0,
                max_storage: 0,
                max_sub_task: 0,
                model_num: 0,
                predict_num: 0,
                predict_save_records: 0,
                remain_coreh: 0,
                running_task: 0,
                search_num: 0,
                storage_num: 0,
                tools_used: 0,
                tot_coreh: 0,
                tot_task: 0,
                train_num: 0,
                used_coreh: 0
            },
            tableData: [],
            options: [
                {
                    title: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已用空间', '最大空间', '文件数目']
                    },
                    series: [
                        {
                            name: '云存储数据',
                            type: 'bar',
                            data: [100, 10, 50]
                        }
                    ]
                },
                {
                    title: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已用空间', '最大空间', '文件数目']
                    },
                    series: [
                        {
                            name: '作业概括数据',
                            type: 'bar',
                            data: [100, 10, 50]
                        }
                    ]
                },
                {
                    title: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已用空间', '最大空间', '文件数目']
                    },
                    series: [
                        {
                            name: '计算资源数据',
                            type: 'bar',
                            data: [100, 10, 50]
                        }
                    ]
                },
                {
                    title: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已用空间', '最大空间', '文件数目']
                    },
                    series: [
                        {
                            name: '数据库数据',
                            type: 'bar',
                            data: [100, 10, 50]
                        }
                    ]
                },
                {
                    title: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已用空间', '最大空间', '文件数目']
                    },
                    series: [
                        {
                            name: '训练模型数据',
                            type: 'bar',
                            data: [100, 10, 50]
                        }
                    ]
                },
                {
                    title: {
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已用空间', '最大空间', '文件数目']
                    },
                    series: [
                        {
                            name: '智能预测数据',
                            type: 'bar',
                            data: [100, 10, 50]
                        }
                    ]
                },
            ],//eCharts数据

        }
    },
    mounted() {
        let that = this;
        for(let item in this.options){
            var chartDom = document.getElementsByClassName('cloud')[item];
            var myChart = echarts.init(chartDom);
            var option = that.options[item]
            option && myChart.setOption(option);
        }
        //渲染eCharts
        let userData = checkLogin();

        //请求多个资源
            Axios({
                method: 'get',
                url: 'http://c7.cabc.top:8222/api/v1.0/jwt/resources/'
            }).then((result) => {
                if (result.data.code == 0) {
                    this.data = result.data.data;
                } else {
                    this.$message.error('error！')
                }
            }).catch((err) => {
                this.$message.error('error！')
            });

            Axios({
                method: 'get',
                url: 'http://c7.cabc.top:8222/api/v1.0/jwt/squeue/admin/?username=root',
            })
                .then((result) => {
                    if (result.data.code == 0) {

                        let tableData = [];
                        let arr = result.data.data;
                        for (let i = 0; i < arr.length; i++) {
                            let obj = {
                                ID: '',
                                name: '',
                                alubank: '',
                                create_time: '',
                                user_name: '',
                                num: '',
                                state: '',
                            }
                            obj.ID = arr[i][0],
                                obj.name = arr[i][1],
                                obj.alubank = arr[i][2],
                                obj.create_time = arr[i][3],
                                obj.user_name = arr[i][4],
                                obj.num = arr[i][5],
                                obj.state = arr[i][6]
                            tableData.push(obj)
                        }
                        this.tableData = tableData;
                        let names = ['ID', "name", "alubank", 'create_time', 'user_name', "num", 'state'];
                        // for(let i = 0 ;i<names.length;i++){
                        //     obj.names[i]
                        // }
                    } else {
                        this.$message.error('error！')
                    }
                }).catch((err) => {
                    this.$message.error('error！')
                });

    }
}
</script>
<style scoped>
.main {
    background-color: #f6f7f8;
}

.cards {
    display: grid;
    grid-template-columns: 50% 50%;

}

.cloud {
    height: 400px;
    width: 400px;
}

.card-body-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f6f7f8;
    margin: auto;
    border-radius: 10px;
}

.box-card {
    /* margin: auto; */
    /* display: flex; */
}

.pic-data {
    display: flex;
}

.el-card {
    margin: 20px;
}

.data {
    padding: 10px;
    border-radius: 8px;
    background: #f6f7f8;
    margin: 20px auto;
}

em {
    font-size: larger;
    font-weight: 700;
    margin: 0 5px;
}

.header {
    font-size: x-large;
    font-weight: 700;
}

.homework {
    margin: 20px;
}

.card {
    display: flex;
}

i {
    margin: auto 10px;
    font-size: xx-large;
}
</style>
    